<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>初识vue</title>
</head>
<body>
    <div id="root">
       
    </div>
</body>
<script>
    // 定义一个变量
    let number = 18;
    // 这里定义的属性是可以遍历的
    let person = {
        name: "Tom",
        sex: "男",
        // 这里定义的age属性是根据number变量的值计算的,后序当number变量改变时，age属性不会发生变化
        // age: number
    }
    // 这里定义的属性是不可遍历的
    Object.defineProperty(person, "age", {
        // value: 25,
        // enumerable: true, // 这里设置为true，表示age属性可遍历,默认值是false,代表可不枚举遍历
        // writable: true, // 这里设置为true，表示age属性可修改,默认值是false,代表不可修改
        // configurable: true // 这里设置为true，表示age属性可删除,默认值是false,代表不可删除
        //当调用 person.age 属性时，会自动调用get 方法
        get: function() {
            console.log("有人读取 persion.age 属性了");
            return number;
        },
        set(value) {
            console.log("有人修改 persion.age 属性了");
            number =  value;
        }
    }); 
    // console.log(Object.keys(person)); // ["name", "sex"]
    // 另外一种遍历方式 通过遍历person 对象的属性，获取person对象的属性值
    // for (let key in person) {
    //     console.log('@', person[key]);
    // }
    console.log(person); 
    Vue.config.productionTip=false;
    const vm = new Vue({
        el: "#root",
        data:{
            name: "Vue",
            address: "北京" 
        }
    });
    console.log(vm);
</script>
</html>